<template>
	<van-pull-refresh v-model="loading"
	                  @refresh="onRefresh"
	                  success-text="刷新成功">
		
		<div style="height: 100%;margin: 0;">
			
			<!--			顶栏-->
			<div class="sticky bg">
				<!--推荐和定位-->
				<div style="background-color: transparent ;width: 100vw">
					<div style="width: 160px;">
						<van-tabs v-model="active" background="rgba(0,0,0,0)" color="#58cfe3">
							<van-tab name="n">

								<template #title>
									<h3 style="color: black">推荐</h3>
								</template>
							</van-tab>
							<van-tab name="a" >
								<template #title>
									<h3 style="color: black" @click="selectlocation">{{ location }}</h3>
								</template>
							</van-tab>
						</van-tabs>
					</div>
				</div>
				
				<!--搜索-->
				<div>
					<div style="display: flex;padding:10px">
						<!--						<el-input v-model="name"  prefix-icon="el-icon-search" placeholder="请输入商品名称关键字搜索"></el-input>-->
						<!--						<el-button  @click="$router.push({ path: '/front/search', query: { name: name } })" size="medium" type="primary" style="margin-left: 5px; background-color: #409EFF"><i class="el-icon-search"></i></el-button>-->
						<!--						-->
						<van-search
								style="width: 100%"
								v-model="name"
								shape="round"
								background="rgba(0,0,0,0)"
								placeholder="请输入搜索关键词">
							<template #right-icon>
								<div @click="$router.push({ path: '/front/search', query: { name: name } })">
									<van-icon name="fire-o" />
								</div>
							</template>
							
							<template #left-icon>
								<div @click="$router.push({ path: '/front/search', query: { name: name } })">
									<van-icon name="scan" />
								</div>
							</template>
						</van-search>
					
					</div>
				</div>
			
			</div>
			
			<!--			内容-->
			<div class="mobileBody">
				<!--业务分类	-->
				<div>
					<ul>
						<li v-for="i in typeList">

              <svg class="icon" aria-hidden="true">
                <use :xlink:href="i.icon"></use>
              </svg>
              <p>{{i.title}}</p>
						</li>
					</ul>
				
				</div>

        <!--特价-->
<!--        <div style="padding-bottom: 10px">-->
<!--          <van-row gutter="10" type="flex" justify="space-between">-->
<!--            <van-col span="12">-->
<!--              <div class="p"></div>-->
<!--            </van-col>-->
<!--            <van-col span="6">-->
<!--              <div class="p"></div>-->
<!--            </van-col>-->
<!--            <van-col span="6">-->
<!--              <div class="p"></div>-->
<!--            </van-col>-->
<!--          </van-row>-->
<!--        </div>-->
				
				
				<!--商品主体-->
				<div class="box">
					<div v-for="item in goodsList" style="margin-bottom: 20px" class="item goods-item" @click="$router.push('/front/goodsDetail?id=' + item.id)">
						<img :src="item.img" alt="" class="img">
						<div style="font-size: 16px; height: fit-content; color: #555; margin-bottom: 5px" class="line2 goods-name">{{ item.name }}</div>
						<div style="display: flex; align-items: baseline">
							<strong style="color: red; font-size: 14px">￥{{ item.price }}</strong>
							<!--							<span style="margin-left: 20px; color: #666">{{ item.readCount }}人浏览</span>-->
							<!--							<span style="margin-left: 20px; color: #666">{{ item.likesCount }}人点赞</span>-->
						</div>
					</div>
				
				</div>
				<div>
				
				</div>
			
			</div>
		
		</div>
    <van-action-sheet
        v-model="show"
        cancel-text="取消"
        close-on-click-action
    >  <van-area @confirm="confirm" title="选择城市" :area-list="areaList" :columns-num="2" />
    </van-action-sheet>


	</van-pull-refresh>


</template>

<script>

import {replaceImgPath} from "@/utils/utils";
import router from "@/router";
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';

export default {

  data() {
    return {
      show:false,
      active:'a',
      areaList,
      location:"南宁",
      typeList:[
        {title:"家电",icon:"#icon-xiaojiadian"},
        {title:"数码",icon:"#icon-shouji"},
        {title:"书籍",icon:"#icon-shuji"},
        {title:"衣物",icon:"#icon-yuanqiqunzi-"},
        {title:"化妆品",icon:"#icon-huazhuangpin"}
      ],

      categoryList: [],
      goodsList: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 12,  // 每页显示的个数
      total: 0,
      category: '全部',
      sort: '最新',
      name: '',
	    
	    count:0,
	    loading:false,
    }
  },
	mounted() {
		this.loadCategory()
		this.loadGoods(1)
		window.onkeydown = (e) => {
			if (e.key === 'Enter'){
				router.push({ path: '/front/search', query: { name: this.name } })
			}
		}
		
	},
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    action(){},
    confirm(a){
      this.location=a[1].name.replace("市","");
      this.show=false;
    },
    selectlocation(){
      if(this.active==='a'){
        this.show=true;
      }else {
        this.show=false;
      }

    },
    loadCategory() {
      this.$request.get('/category/selectAll').then(res => {
        this.categoryList = res.data || []
      })
    },
    loadGoods(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/goods/selectFrontPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          category: this.category === '全部' ? null : this.category,
          sort: this.sort
        }
      }).then(res => {
        if (res.code === '200') {
          this.goodsList = replaceImgPath(res.data?.list,"img")
          this.total = res.data?.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.loadGoods(pageNum)
    },
	  onRefresh(){
	setTimeout(() => {
		this.loading = false;
		this.count++;
		Toast("刷新成功")
	}, 1000);
}
  }
}
</script>

<style scoped>
.bg {
  background: linear-gradient(to bottom, #b4efd0, #ffffff);
  background-size: 100%;
 
}
.sticky{
    position: sticky;
    top: 0;
	z-index: 10;
}
.goods-item {
  cursor: pointer;
}
.goods-item img, .goods-name {
  transition: all .2s;
}
.goods-item:hover img {
  scale: 1.03;
}
.goods-item:hover .goods-name {
  color: #ec3d3d !important;
}
</style>
